<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="header_index">
			
		</div>
		<div class="header_next">
			<div class="container">
				<span class="header_next_one">学习中心</span>
				<span class="header_next_two">购买课程</span>
				<span class="header_next_three">账号设置</span>
				<span class="header_next_four">会员中心</span>
			</div>
		</div>
		<div class="container">
			<div class="vip_center">
				<div class="vip_center_per">
					<div class="vip_title">
						<span class="pur_record">购买记录</span>
						<span class="my_cuurency">我的坚果币</span>
					</div>
					<div class="yesno_complete">
						<span class="complete">已完成</span><span class="no_complete">未完成</span>
					</div>
					<div>
					<table style="margin: 20px 0 0 0;" class="table">
						<thead style="background: #F2F1F1;text-align: center;">
                            <tr>
                                <td>订单号</td>
                                <td>课时数</td>
                                <td>订单金额</td>
                                <td>优惠价格</td>
                                <td>应付金额</td>
                                <td>未付金额</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody style="text-align: center;" class="tb">
                        	<tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td><div class="go_pay">继续支付</div></td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td><div class="go_pay">继续支付</div></td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td><div class="go_pay">继续支付</div></td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td><div class="go_pay">继续支付</div></td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td><div class="go_pay">继续支付</div></td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td><div class="go_pay">继续支付</div></td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td><div class="go_pay">继续支付</div></td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td><div class="go_pay">继续支付</div></td>
                            </tr>
                        </tbody>
					</table>
				</div>
				</div>
			</div>
			
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>	
		<script>
			$('.complete').css({ "color": "#ffffff", "background": "#FAA014" });
			$('.header_next_four').css({ "color": "#024E96", "border-bottom": "4px solid #024E96" });
			$('.pur_record').css({ "color": "#024E96", "border-bottom": "4px solid  #024E96" });
			$('.pur_record').click(function() {
				$('.pur_record').css({ "color": "#024E96", "border-bottom": "4px solid  #024E96" });
				$('.my_cuurency').css({ "color": "#4C4C4C", "border-bottom": "none" });
				
			});
			$('.my_cuurency').click(function() {
				$('.pur_record').css({ "color": "#4C4C4C", "border-bottom": "none" });
				$('.my_cuurency').css({ "color": "#024E96", "border-bottom": "4px solid  #024E96" });
				
			});
			$('.complete').click(function() {
				$('.complete').css({ "color": "#ffffff", "background": "#FAA014" });
				$('.no_complete').css({ "color": "#4C4C4C", "background": "#ffffff" });
				
			});
			$('.no_complete').click(function() {
				$('.complete').css({ "color": "#4C4C4C", "background": "#ffffff" });
				$('.no_complete').css({ "color": "#ffffff", "background": "#FAA014" });
				
			});
		</script>
	</body>
</html>
